<template>
  <div>
    <div class="title">
      <h1>基本信息</h1>
    </div>
    <div class="content">
      <el-form ref="form" :model="form" label-width="300px"   >
        <el-form-item
          label="名称/CAS号："
          style="width: 600px;font-size: 8ex"
          prop="cas"
        >
<!--          //style="width: 50%;"-->
          <el-input v-model="form.cas"   style="width: 73% " placeholder="请输入内容" @change="getInformation" />
        </el-form-item>

        <el-form-item
          label="药品类别："
          style="width: 600px;font-size: 8ex"
          prop="wzlb"

        >
          <el-cascader
            v-model="selectedOptions"
            :options="cates"
            @change="handleChangeWzlb"

          />
        </el-form-item>

        <el-form-item
          label="处理工艺："
          style="width: 600px;font-size: 8ex"
          prop="process"
          :rules="[
            {required: false, message: '处理工艺不能为空',trigger: 'blur'}
          ]"
        >
          <el-cascader
            v-model="selectedOptions2"
            :options="techs"
            @change="handleChangeClgy"

          />
        </el-form-item>

<!--        <el-form-item
          label="纤维类型："
          style="width: 600px;font-size: 8ex"
          prop="xwlb"
          :rules="[
            {required: true, message: '纤维类别不能为空',trigger: 'blur'}
          ]"
        >
          <el-select v-model="value_f" placeholder="请选择" @change="getFiber" style="text-align:left ">
            <el-option
              v-for="item in fibers"
              :key="item.value_f"
              :label="item.label_f"
              :value="item.value_f"
            />
          </el-select>
        </el-form-item>-->
`
<!--        <el-form-item v-show="showSrjd" label="水溶解度：" style="width: 600px;font-size: 8ex" prop="srjd">
          <el-tooltip class="item" effect="white" :content="this.element.lhsxbSrjd" placement="right">
            <el-input v-model="form.srjd" style="width: 73%" placeholder="请输入内容" @change="getInformation">
              <template slot="append">mg/L</template>
            </el-input>
          </el-tooltip>
        </el-form-item>-->

<!--        <el-form-item v-show="showBhzqy" label="饱和蒸气压：" style="width: 600px;font-size: 8ex" prop="bhzqy">
          <el-tooltip class="item" effect="white" :content="this.element.lhsxbBhzqy" placement="right">
            <el-input v-model="form.bhzqy"  style="width: 73%" placeholder="请输入内容" @change="getInformation">
              <template slot="append">pa</template>
            </el-input>
          </el-tooltip>
        </el-form-item>-->

      </el-form>

      <br>
      <br>
      <div class="button">
      <el-button style="margin-top: 12px;text-align: center" @click="sendBaseInformation">下一步</el-button>
      </div>
    </div>

  </div>

</template>

<script>
export default {
  name: 'BaseInformation',
  data() {
    return {
      form: {
        cas: '',
        srjd: '',
        bhzqy: ''
      },
      baseInformation: [],
      showSrjd: true,
      showBhzqy: true,
      selectedOptions: [],
      selectedOptions2: [],
      tip_1: '',
      tip_2: '',
      value_fc: '',
      label_fc: '',
      disabled: false,
      disabled_cates: true,
      disabled_techs: true,
      disabled_subCates: true,
      disabled_subTechs: true,
      faWzlb: '',
      wzlb: '',
      faClgy: '',
      process: '',
      value_ft: '',
      label_ft: '',
      value_c: '',
      value_t: '',
      value_f: '',
      label_c: '',
      label_t: '',
      label_f: '',
      element: {},
      cates: [{
        value: '原料药',
        label: '原料药',
      }, {
        value: '辅料',
        label: '辅料',
      }, {
        value: '中间体',
        label: '中间体',
      }, {
        value: '溶剂',
        label: '溶剂'
      }],
      subCates: [],
      techs: [{
        value: '发酵类药物',
        label: '发酵类药物',
      },{
        value: '化学合成类药物',
        label: '化学合成类药物',
      }],
      subTechs: []
    }
  },
  watch: { // 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
    'form.cas': function (newVal, oldVal) {
      this.selectedOptions = []
      this.selectedOptions2 = []
      this.form.bhzqy = ''
      this.form.srjd = ''
      this.form.yjbz = '1'
      this.value_f = ''
    }
  },
  methods: {
    // 暂时用不到更改

    // handleChangeWzlb() {
    //   this.faWzlb = this.selectedOptions[0]
    //   this.wzlb = this.selectedOptions[1]
    //   console.log('aaa:', this.selectedOptions[0] + '：' + this.selectedOptions[1])
    //   if (this.selectedOptions[0] != '') {
    //     if (this.selectedOptions[0] === '基础化学品') {
    //       this.showSrjd = true
    //       this.showBhzqy = true
    //       this.techs = [{
    //         value: '预处理',
    //         label: '预处理',
    //         children: [
    //           {
    //             value: '预处理、染色、印染、整理任意',
    //             label: '预处理、染色、印染、整理任意'
    //           }, {
    //             value: '预处理',
    //             label: '预处理'
    //           }]
    //       }]
    //     } else if (this.selectedOptions[0] === '染料') {
    //       this.showSrjd = false
    //       this.showBhzqy = false
    //       this.techs = [{
    //         value: '预处理',
    //         label: '预处理',
    //         children: [
    //           {
    //             value: '预处理、染色、印染、整理任意',
    //             label: '预处理、染色、印染、整理任意'
    //           }, {
    //             value: '预处理',
    //             label: '预处理'
    //           }]
    //       }, {
    //         value: '浸染染色',
    //         label: '浸染染色',
    //         children: [{
    //           value: '浸染工艺',
    //           label: '浸染工艺'
    //         }, {
    //           value: '涂料印花',
    //           label: '涂料印花'
    //         }, {
    //           value: '无',
    //           label: '无'
    //         }]
    //       }, {
    //         value: '浸轧染色',
    //         label: '浸轧染色',
    //         children: [{
    //           value: '整理的上游工序',
    //           label: '整理的上游工序'
    //         }, {
    //           value: '浸轧工艺，功能性整理任意',
    //           label: '浸轧工艺，功能性整理任意'
    //         }, {
    //           value: '印花',
    //           label: '印花'
    //         }, {
    //           value: '涂层',
    //           label: '涂层'
    //         }, {
    //           value: '连续染色',
    //           label: '连续染色'
    //         }, {
    //           value: '间歇式染色',
    //           label: '间歇式染色'
    //         }]
    //       }]
    //     } else {
    //       this.showSrjd = true
    //       this.showBhzqy = true
    //       this.techs = [{
    //         value: '浸染染色',
    //         label: '浸染染色',
    //         children: [{
    //           value: '浸染工艺',
    //           label: '浸染工艺'
    //         }, {
    //           value: '涂料印花',
    //           label: '涂料印花'
    //         }, {
    //           value: '无',
    //           label: '无'
    //         }]
    //       }, {
    //         value: '浸轧染色',
    //         label: '浸轧染色',
    //         children: [{
    //           value: '整理的上游工序',
    //           label: '整理的上游工序'
    //         }, {
    //           value: '浸轧工艺，功能性整理任意',
    //           label: '浸轧工艺，功能性整理任意'
    //         }, {
    //           value: '印花',
    //           label: '印花'
    //         }, {
    //           value: '涂层',
    //           label: '涂层'
    //         }, {
    //           value: '连续染色',
    //           label: '连续染色'
    //         }, {
    //           value: '间歇式染色',
    //           label: '间歇式染色'
    //         }]
    //       }]
    //     }
    //   }
    // },
    handleChangeClgy() {
      this.faClgy = this.selectedOptions2[0]
      this.process = this.selectedOptions2[1]
      console.log('aaa:', this.selectedOptions2[0] + '：' + this.selectedOptions2[1])
    },

    getFiber() {
      this.value_f = this.fibers[this.value_f - 1].value_f
      this.label_f = this.fibers[this.value_f - 1].label_f
    },
    getInformation() {
      const casNo = { casNo: this.form.cas }
      this.$api.evaluate.getEvaluate(casNo).then((res) => {
        console.log(res)
        if (res.msg === 'fail') {
          // this.$message('CAS号已存在，无法插入新物质')
        }
        this.$api.element.getInforamtion(casNo).then((res) => {
          this.element = res.data
        })
      })
      this.$api.element.query(casNo).then((res) => {
        if (res.data === null) {
          // this.$message('CAS号不存在，请重新输入')
        }
      })
    },
    putInput_2() {
      this.tip_1 = this.element.lhsxbSrjd
      // let srjd = {"casNo":this.form.cas, "wzlb":this.value_c}
    },
    putInput_3() {
      this.tip_2 = this.element.lhsxbBhzqy
    },
    getInput_1() {

    },
    sendBaseInformation() {
      // 先注释掉水溶解度和饱和蒸气压
      const casNo = {casNo: this.form.cas}
      if (this.form.cas != '') {
        if (this.selectedOptions != '') {
          if (this.selectedOptions2 != '') {
            // if (this.value_f != '') {
              if ((this.faWzlb === '染料') || (this.faWzlb != '染料') || (this.faWzlb === '染料')) {
                if ((this.faWzlb === '染料') || (this.faWzlb != '染料') || (this.faWzlb === '染料')) {
                  this.$api.element.getInforamtion(casNo).then((res) => {
                    this.baseInformation = res.data
                    const baseInformation = {
                      casNo: this.form.cas,
                      faWzlb: this.faWzlb,
                      wzlb: this.wzlb,
                      faClgy: this.faClgy,
                      process: this.process,
                      fiberId: this.value_f,
                      fiber: this.label_f,
                      lhsxbSrjd: this.form.srjd,
                      lhsxbBhzqy: this.form.bhzqy,
                      baseinfoZwmc: this.baseInformation.baseinfoZwmc,
                      baseinfoYwmc: this.baseInformation.baseinfoYwmc,
                      baseinfo_xdfzzl: this.baseInformation.baseinfo_xdfzzl,
                      picBase64: this.baseInformation.picBase64,
                      baseinfoFzs: this.baseInformation.baseinfoFzs
                    }
                    this.$store.commit('setBaseInformation', baseInformation)
                    this.$emit('listenChild')
                  })
                  console.log('sendbaseinfo', this.baseInformation)
                  console.log('baseinfoZwmc', this.baseInformation.baseinfoZwmc)
                  // let flag = {flag:'1'};
                } else {
                  this.$message('饱和蒸气压不能为空')
                }
              } else {
                this.$message('水溶解度不能为空')
              }
        /*    } else {
              this.$message('纤维类型不能为空')
            }*/
          } else {
            this.$message('处理工艺不能为空')
          }
        } else {
          this.$message('物质类别不能为空')
        }
      } else {
        this.$message('cas号不能为空')
      }
      // 用下面的语句也可以，下面是调用evaluate中的$store.commit的方法，其实是脱裤子放屁，当时脑子抽了，写了个子组件向父组件传值。
      // this.$emit('listenChild',baseInformation);
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  position: absolute;
  left: 0px;
}

.content {
  position: absolute;
  top: 100px;
  left: 20%;
  right: 25%;
  text-align: left;
}
.button {
  text-align: center;
}

.bottom {
  position: absolute;
  top: 557px;
  left: 72.1%;
}
</style>
